import React from 'react';
import './HubCard.scss';
import Paper from '@mui/material/Paper';
import Button from '@mui/material/Button';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import Grid from '@mui/material/Grid';
import { styled } from '@mui/material/styles';
import MenuItem from '@mui/material/MenuItem';
import Menu from '@mui/material/Menu';


const Item = styled(Paper)(({ theme }) => ({
    ...theme.typography.body2,
    textAlign: 'center',
    backgroundColor: "#F4F4F4", 
    boxShadow: "none",
    height: "3.5cm", 
    width: "6cm", 
    display: "flex",
    alignItems: "center", 
    flexDirection: "column", 
    justifyContent: "flex-start", 
    flexWrap: "wrap", 
	color: "#272727", 
	padding: "10px",
	borderRadius: "10px", 
	border: "3px", 
	borderColor: "#DFDFDF",
	borderStyle: "solid", 
	transition: "200ms",
}));


function HubCard() {
    const [anchorEl, setAnchorEl] = React.useState(null);

    const handleMenu = (event) => {
        setAnchorEl(event.currentTarget);
    };

    const handleClose = () => {
        setAnchorEl(null);
    };


    return (
        <Item>
            <Grid container spacing={3}>
                <Grid item xs={2} md={2} style={{paddingTop: "18px"}}>
                    <img src="raspberry-color.svg" alt="raspberry" width="45cm"/>
                </Grid>
                <Grid item xs={9} md={9}>
                    <h3 style={{cursor: "pointer"}}>Кабинет 102
                    <br /> 
                    <p style={{fontWeight: "lighter"}}>v0.0.3</p></h3>
                </Grid>
                <Grid item xs={1} md={1}  style={{cursor: "pointer", paddingLeft: "0px", paddingRight: "0px"}}>
                    <Button style={{color: "black", width: "0cm", height: "0.6cm", padding: "0", minWidth: "12px"}}>
                        <MoreVertIcon padding="0px" onClick={handleMenu}/>
                    </Button>
                    <Menu
                        id="menu-appbar"
                        anchorEl={anchorEl}
                        anchorOrigin={{
                          vertical: 'bottom',
                          horizontal: 'right',
                        }}
                        keepMounted
                        transformOrigin={{
                          vertical: 'top',
                          horizontal: 'right',
                        }}
                        open={Boolean(anchorEl)}
                        onClose={handleClose}>

                        <MenuItem onClick={handleClose}>Logout</MenuItem>
                        <MenuItem onClick={handleClose}>Settings</MenuItem>
                        <MenuItem onClick={handleClose}>Restart</MenuItem>
                    </Menu>
                </Grid>
                <Grid item xs={12} md={12} >
                    <p style={{fontSize: "10", fontWeight: "lighter"}}>
                        Последнее обновление:
                        <br />
                        21.09.2048</p>
                </Grid>
            </Grid>
        </Item>
    )
}


export default HubCard;
